import React, { useState, useEffect, useCallback } from 'react'
import { message, Table, Image, Button, Space, Tag, Row, Col, Popconfirm } from 'antd'
import { DeleteOutlined, FormOutlined, PlusOutlined, FileImageOutlined, ToTopOutlined } from '@ant-design/icons'
import { useNavigate, useSearchParams } from 'react-router-dom'

import request from '../../../utils/request'




const List = () => {
  const [datalist, setDatalist] = useState([]);
  const [total, setTotal] = useState(0);
  const [urlParams, setUrlParams] = useSearchParams()//这个是用了获取当前地址栏的数据，那下面点击页面的时候就把页码设置到地址栏即可
  console.log(urlParams.get('page'), 'qqqq');

  const [params, setParams] = useState({
    page: Number(urlParams.get('page')) || 1,
    size: Number(urlParams.get('size')) || 10
  })



  const getData = async () => {
    const { data } = await request.get('/iq', {
      params
    })
    console.log(data);
    setDatalist(data.data.result)
    setTotal(data.data.total)
  }
  useEffect(() => {
    getData()
  }, [params])
  const navigate = useNavigate()

  const redact = useCallback((id) => {
    navigate('/manage/answer/add?id=' + id)
  }, [])

  const pagination = {
    total,
    current: params.page,
    onChange(page, size) {
      console.log('点击页码打印的数据page:', page);
      console.log('点击页码打印的数据size:', size);
      setParams({
        page,
        size,
      })
      console.log(page, '111111');
      // 这里是把当前点击的页码设置到地址栏上面，
      setUrlParams({
        page, size,
      })
    }

  }


  const columns = [
    {
      title: '#',
      key: '_id',
      render(text, record, index) {

        return index + 1
      }
    },
    {
      title: '面试题',
      dataIndex: 'question',
      render(text, record, index) {
        return <p>{text}</p>
      }
    },
    {
      title: '热度',
      dataIndex: 'hot',

    },
    {
      title: '答案数量',
      dataIndex: 'answer',
    },
    {
      title: '操作答案',
      dataIndex: '_id',
      render(id) {
        return (

          <Space>
            <Button type='primary' icon={<FormOutlined />} size="small" onClick={redact.bind(null, id)} >添加答案</Button>

          </Space>
        )
      }

    },

  ];

  return (<Table rowKey='_id'
    columns={columns}
    dataSource={datalist}
    pagination={pagination}
  />
  )
}
export default List;